<template>
  <div>
    <!-- ref定义的模型数据，在template中,直接使用，不需要
    它会自动解套 -->
    <p>{{ message }}</p>
    <p>
      <button @click="change">改变</button>
    </p>
    <hr />
    <p>今晚吃点啥 {{ foods }}</p>
    <p>
      <button @click="add">加点东西吧</button>
    </p>
    <p>person is {{ person }}</p>
    <p>
      <button @click="changePerson">change</button>
    </p>
  </div>
</template>

<script setup>
// Vue3面向函数编程
import { ref, reactive } from 'vue'

// 如果是ref定义的模型数据，我们在js中改，必须加上.value
const message = ref('今天晚上吃点啥?')

// foods.value ===> Proxy(xxx)
const foods = ref(['猪脚饭', '泡面'])

// person ===> Proxy(xxx)
const person = reactive({ name: '张三', age: 30 })

console.log('---foods---', foods)
console.log('---person---', person)

const change = () => {
  message.value = '烤鸡翅、香辣鸡腿堡、可乐'
}

const add = () => {
  foods.value.push('小龙虾')
}

const changePerson = () => {
  person.name = '邹思敏'
  person.age = 28
}
</script>
